<template>
    <div>
        <mu-appbar style="width: 100%;" color="primary" fixed>
            <mu-button icon slot="left" @click="goback">
                <mu-icon value="reply"></mu-icon>
            </mu-button>
            我的活动
            <mu-button icon slot="right" >
                <mu-icon value="more_horiz"></mu-icon>
            </mu-button>
        </mu-appbar>

        <!-- card  start-->
        <el-card :body-style="{ padding: '10px' }" v-for="(act,index) in acts" :key='index' >
            <img :src="act.pic" class="image" @click="toDetail(index)">
            <div style="padding: 14px;">
                <span>{{act.title}}</span>
                <div class="bottom clearfix">
                    <time class="time">发布日期：{{ act.uploadtime | formatDate }}</time>
                    <el-button v-if="act.status==0" class="debutton" type="text" @click.native="deleteact(index)">删除</el-button>
                    <el-button v-if="act.status==2" class="debuttoned" type="text"  >已删除</el-button>
                    <el-button v-if="act.status==1" class="debuttoned" type="text"  >已过期</el-button>
                </div>
            </div>
        </el-card>
        <br>
        <!-- card  end-->
    </div>
</template>

<script>
import { formatDate } from "../../date/date.js";
import axios from "axios";
import Message from "muse-ui-message";
import Toast from "muse-ui-toast";
export default {
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  data() {
    return {
      acts: "",
      endtime: ""
    };
  },
  methods: {
    goback() {
      this.$router.go(-1); //返回上一层
    },
    deleteact(index) {
      Message.confirm("您确认删除吗?", "确认").then(conresult => {
        if (conresult.result) {
          axios
            .get("/api/activity/deleteact", {
              params: { id: this.acts[index]._id }
            })
            .then(res => {
              console.log(res);
            })
            .catch(err => {
              console.log(err);
            });
          Toast.success("删除成功！");
        } else {
          Toast.error("您取消了操作");
        }
      });
    },
    toDetail(index) {
      this.$router.push({
        path: "/index/actmanage/actmanagedetail",
        query: { id: this.acts[index]._id }
      });
    }
  },
  created() {
    axios
      .get("/api/activity/getmyacts", { params: {} })
      .then(res => {
        this.acts = res.data.data.reverse();
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.debutton {
  padding: 0;
  float: right;
  color: red;
}
.debuttoned {
  padding: 0;
  float: right;
  color: #3a3a3a;
  text-decoration: line-through;
}
.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
